﻿@{
    ViewData["Title"] = "编辑";
}

<form class="layui-form layui-form-pane" id="editForm">
    <div class="layui-form-item">
        <label class="layui-form-label">标签名称</label>
        <div class="layui-input-block">
            <input type="text" name="labelName" id="labelName" autocomplete="off" placeholder="不超过20个字符" lay-verify="required|maxlength" lay-maxlength="20" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="display: none;">
        <label class="layui-form-label">标签id</label>
        <div class="layui-input-block">
            <input type="text" id="labelId" name="labelId" autocomplete="off" placeholder="不超过20个字符" lay-verify="required|maxlength" lay-maxlength="20" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" pane>
        <label class="layui-form-label">标签类型</label>
        <div class="layui-input-block">
            <input type="radio" name="labelType" lay-filter="labelType" value="1" title="手动标签" checked>
            <input type="radio" name="labelType" lay-filter="labelType" value="2" title="条件标签">
        </div>
    </div>

    <div class="layui-form-item condition-field" style="display: none;">
        <h2>条件设置</h2>
        <label class="layui-form-label">条件关系</label>
        <div class="layui-input-block">
            <input type="radio" name="isCondition" value="1" title="必须满足条件" checked>
        </div>
    </div>
    <br />
    <div class="layui-form-item condition-field" style="display: none;">
        <label class="layui-form-label">时间条件</label>
        <div class="layui-input-block">
            <table>
                <tr>
                    <td>
                        <input type="checkbox" class="toggle-checkbox" name="isCondition1" value="1" title="开卡时间" lay-filter="conditionFilter">
                    </td>
                    <td>
                        <div class="layui-col-md8">
                            <select id="openCardDate" name="openCardDate" disabled>
                                <option value="0">请选择开卡的时间</option>
                                <option value="1">今天开卡的会员</option>
                                <option value="2">最近7天开卡的会员</option>
                                <option value="3">最近30天开卡的会员</option>
                            </select>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <br />
        <div class="layui-input-block">
            <table>
                <tr>
                    <td>
                        <input type="checkbox" class="toggle-checkbox" value="1" title="交易时间" lay-filter="conditionFilter">
                    </td>
                    <td>
                        <div class="layui-col-md8">
                            <select id="transactionDate" name="transactionDate" disabled>
                                <option value="0">请选择交易的时间</option>
                                <option value="1">今天交易的会员</option>
                                <option value="2">最近7天交易的会员</option>
                                <option value="3">最近30天交易的会员</option>
                            </select>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

    </div>
    <br />
    <div class="layui-form-item condition-field" style="display: none;">
        <label class="layui-form-label">会员条件</label>
        <div class="layui-input-block">

            <table>
                <tr>
                    <td>
                        <input type="checkbox" class="toggle-checkbox" value="1" title="会员性别" lay-filter="conditionFilter">
                    </td>
                    <td>
                        <div class="layui-col-md8">
                            <select id="memberSex" name="memberSex" disabled>
                                <option value=" ">请选择性别</option>
                                <option value="true">男</option>
                                <option value="false">女</option>
                            </select>
                        </div>
                    </td>
                </tr>
            </table>

        </div>
    </div>
    <br />
    <div class="layui-form-item condition-field" style="display: none;">
        <label class="layui-form-label">交易条件</label>
        <table>
            <tr>
                <td><input type="checkbox" class="toggle-checkbox" name="isCondition6" value="1" title="交易笔数" lay-filter="conditionFilter"></td>
                <td>
                    <input type="text" id="tradeNumberX" name="tradeNumberX" class="layui-input" disabled>
                </td>
                <td>&emsp;-&emsp;</td>
                <td>
                    <input type="text" id="tradeNumberD" name="tradeNumberD" class="layui-input" disabled>
                </td>
                <td><span style="color:grey;margin-left:10px"> 请填写0 - 1亿的整数</span></td>
            </tr>
        </table>
        <br />
        <div class="layui-input-block">

            <table>
                <tr>
                    <td> <input type="checkbox" class="toggle-checkbox" name="isCondition7" value="1" title="客&ensp;单&ensp;数" lay-filter="conditionFilter"></td>
                    <td>
                        <input type="text" id="replantingDateX" name="replantingDateX" class="layui-input" disabled>
                    </td>
                    <td>&emsp;-&emsp;</td>
                    <td>
                        <input type="text" id="replantingDateD" name="replantingDateD" class="layui-input" disabled>
                    </td>
                    <td><span style="color:grey;margin-left:10px"> 请填写0 - 99万的小数</span></td>
                </tr>
            </table>
            <br />
        </div>
        <div class="layui-input-block">

            <table>
                <tr>
                    <td><input type="checkbox" class="toggle-checkbox" name="isCondition8" value="1" title="累计消费" lay-filter="conditionFilter"></td>
                    <td>
                        <input type="text" name="cumulativeX" id="cumulativeX" class="layui-input" disabled>
                    </td>
                    <td>&emsp;-&emsp;</td>
                    <td>
                        <input type="text" name="cumulativeD" id="cumulativeD" class="layui-input" disabled>
                    </td>
                    <td><span style="color:grey;margin-left:10px"> 请填写0 - 99万的小数</span></td>
                </tr>
            </table>
            <br />
        </div>
    </div>
    <br />
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    layui.use(['table', 'jquery', 'layer', 'form', 'laypage', 'element'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var laypage = layui.laypage;
        var element = layui.element;

        // 监听多选框状态变化
        form.on('checkbox(conditionFilter)', function (data) {
            var parentTr = data.elem.parentNode.parentNode;
            console.log(parentTr);
            var inputs = parentTr.querySelectorAll('input[type="text"], select');
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].disabled = !data.elem.checked;
            }
            // 使用 layui 的 form 模块更新渲染
            form.render();

        });



        // 监听标签类型变化
        form.on('radio(labelType)', function (data) {
            console.log("标签变化")
            if (data.value == 2) {
                $('.condition-field').show();
            } else {
                $('.condition-field').hide();
            }
        });

        // 初始化时检查默认选中的标签类型
        var defaultLabelType = $('input[name="labelType"]:checked').val();
        if (defaultLabelType == 2) {
            $('.condition-field').show();
        }
        // 自定义验证规则
        form.verify({
            maxlength: function (value, item) {
                var maxLength = item.getAttribute('lay-maxlength');
                if (value.length > maxLength) {
                    return '输入内容不能超过 ' + maxLength + ' 个字符';
                }
            }
        });

        $(function () {
            var labelId = location.search.split('=')[1];
            console.log(labelId)
            fillCustomerInfo();
        })
        //反填客户信息
        function fillCustomerInfo() {
            //alert(111);
            //获取到地址栏中的参数
            var labelId = location.search.split('=')[1];
            console.log(labelId)
            //发送ajax请求
            $.ajax({
                url: 'http://localhost:5174/api/Labels/GetLabelById',
                type: 'post',
                contentType: 'application/json',
                data: JSON.stringify({
                    "labelId": labelId
                }),
                success: function (res) {
                    console.log(res.data)
                    document.getElementById("labelId").value = res.data.labelId;
                    document.getElementById("labelName").value = res.data.labelName;


                    $("input[name='labelType'][value='" + res.data.labelType + "']").prop("checked", true);
                    // 假设从某个数据源获取要反填的值，例如 'option2'
                    // var selectedValue = res.data.labelType;

                    // form.val('labelType', {
                    //     exampleRadio: selectedValue
                    // });

                    // form.render('radio'); // 重新渲染单选框
                    if (res.data.labelType == 2) {
                        $('.condition-field').show();
                    } else {
                        $('.condition-field').hide();
                    }


                    // 反填下拉框
                    var openCardDateValue = res.data.openCardDate;
                    $('#openCardDate').val(openCardDateValue);

                    var transactionDateValue = res.data.transactionDate;
                    $('#transactionDate').val(transactionDateValue);


                   //会员性别
                    var memberSexValue = res.data.memberSex;
                   if (memberSexValue == true) {
                        $('#memberSex').val("true");
                    }
                    else if (memberSexValue == false) {
                        $('#memberSex').val("false");
                    }
                    else
                    {
                        $('#memberSex').val(" ");
                    }

                    // 反填文本框
                    var tradeNumberXValue = res.data.tradeNumberX;
                    $('#tradeNumberX').val(tradeNumberXValue);

                    var tradeNumberDValue = res.data.tradeNumberD;
                    $('#tradeNumberD').val(tradeNumberDValue);

                    var replantingDateXValue = res.data.replantingDateX;
                    $('#replantingDateX').val(replantingDateXValue);

                    var replantingDateDValue = res.data.replantingDateD;
                    $('#replantingDateD').val(replantingDateDValue);

                    var cumulativeXValue = res.data.cumulativeX;
                    $('#cumulativeX').val(cumulativeXValue);

                    var cumulativeDValue = res.data.cumulativeD;
                    $('#cumulativeD').val(cumulativeDValue);

                    // form.render();
                    form.render('select');

                    //反填复选框

                    document.querySelectorAll('.toggle-textbox').forEach(function (textbox) {
                        alert(textbox)
                        textbox.addEventListener('input', function () {
                            var parentTr = textbox.closest('tr'); // 获取最近的tr父元素
                            var checkbox = parentTr.querySelector('.toggle-checkbox'); // 查找复选框

                            if (textbox.value.trim() !== '') {
                                checkbox.checked = true;
                            } else {
                                checkbox.checked = false;
                            }
                            form.render('checkbox'); // 重新渲染复选框
                        });
                        
                    });
                  
                }
            })
        }

        // saveLabel();
        // function saveLabel() {
        //     //发送ajax请求
        //     $.ajax({
        //         url: 'http://localhost:5174/api/Labels/UpdateLabel',
        //         type: 'post',
        //         contentType: 'application/json',
        //         data: JSON.stringify({
        //             "labelId": labelId,
        //             "labelName": $("#labelName").val(),
        //             "labelType": 1
        //         }),
        //         success: function (res) {
        //             console.log(res)
        //             if (res.code > 0) {
        //                 layer.msg('保存成功', { icon: 1 });
        //                 window.location.href = 'LabelView';
        //             } else {
        //                 layer.msg('保存失败', { icon: 2 });
        //             }
        //         }
        //     })
        // }
        function parseBoolean(value) {
            return value === 'false' || value === false;
            value === ' ' || value === null;
            value === 'true' || value === true;
        }
        //添加标签
        form.on('submit(formDemo)', function (data) {
            // alert(111)
            data.elem.disabled = true;//防止重复提交
            // 将 labelType 的值从字符串转换为整数
            data.field.labelType = parseInt(data.field.labelType, 10);


            data.field.openCardDate = parseInt(data.field.openCardDate, 10);
            data.field.transactionDate = parseInt(data.field.transactionDate, 10);

        //    data.field.memberSex = parseBoolean(data.field.memberSex)

            data.field.tradeNumberX = parseInt(data.field.tradeNumberX, 10) || 0;
            data.field.tradeNumberD = parseInt(data.field.tradeNumberD, 10) || 0;

            data.field.replantingDateX = parseFloat(data.field.replantingDateX) || 0;
            data.field.replantingDateD = parseFloat(data.field.replantingDateD) || 0;

            data.field.cumulativeX = parseFloat(data.field.cumulativeX) || 0;
            data.field.cumulativeD = parseFloat(data.field.cumulativeD) || 0;



            data.field.memberSex = parseBoolean(data.field.memberSex) || null;
            data.field.labelId = location.search.split('=')[1];




            console.log(data.field.labelType);
            console.log(data.field.openCardDate);
            console.log(data.field.transactionDate);
            // 创建一个新的对象，只包含非隐藏部分的表单数据  非禁用的条件字段
            var filteredData = {};
            for (var key in data.field) {
                if (!$(`[name="${key}"]`).parents('.condition-field:hidden ').length) {
                    filteredData[key] = data.field[key];
                }
            }
            // // 处理条件字段
            // for (var key in data.field) {
            //     if ($(`[name="${key}"]`).parents('.condition-field:visible ').length) {
            //         filteredData[key] = data.field[key];
            //     }
            // }


            // 使用筛选后的数据进行后续处理，例如发送 AJAX 请求
            console.log(filteredData);





            // 打印表单数据，用于调试
            console.log(JSON.stringify(data.field));
            $.ajax({
                url: 'http://localhost:5174/api/Labels/UpdateLabel',
                type: 'post',
                contentType: "application/json",
                data: JSON.stringify(filteredData),
                success: function (res) {

                    // 添加成功后的操作
                    if (res.code > 0) {

                        layer.msg("修改成功");
                        window.location.href = 'LabelView';
                    }
                }
            });
            return false;
        });





    });
</script>






           






